<script setup>
import { ref, onMounted, computed } from 'vue'
import { Button, Tag, Empty, Card, Tooltip, Dropdown, Input } from 'ant-design-vue'
import {
	DeleteOutlined,
	ShareAltOutlined,
	EllipsisOutlined,
	MessageOutlined,
	ClockCircleOutlined,
	UserOutlined,
	SearchOutlined,
} from '@ant-design/icons-vue'

// 对话历史数据
const conversations = ref([])
const loading = ref(true)

// 响应式检测
const isMobile = ref(false)
const checkScreenSize = () => {
	isMobile.value = window.innerWidth < 768
}

// 搜索状态
const searchText = ref('')

// 角色选项
const roleOptions = ref([
	{ label: '全部角色', value: null },
	{ label: '智能助手', value: 1 },
	{ label: '文学创作伙伴', value: 2 },
	{ label: '技术专家', value: 3 },
	{ label: '心理咨询师', value: 4 },
	{ label: '语言学习伙伴', value: 5 },
	{ label: '游戏伙伴', value: 6 },
])

// 时间范围选项
const timeRangeOptions = ref([
	{ label: '全部时间', value: null },
	{ label: '今天', value: 'today' },
	{ label: '本周', value: 'week' },
	{ label: '本月', value: 'month' },
	{ label: '三个月内', value: 'quarter' },
])

// 模拟对话历史数据
const mockConversations = [
	{
		id: 1,
		title: '编程问题讨论',
		roleName: '技术专家',
		roleId: 3,
		lastMessage: '感谢你的指导，这个算法优化方案很实用！通过重构代码结构和使用更高效的数据结构，性能提升了近30%。',
		messageCount: 28,
		createdAt: '2024-01-15 14:30',
		updatedAt: '2024-01-15 16:45',
		tags: ['编程', 'React', '性能优化', '算法'],
	},
	{
		id: 2,
		title: '诗歌创作指导',
		roleName: '文学创作伙伴',
		roleId: 2,
		lastMessage: '这首诗的意境很美，让我想起了春天的温暖...',
		messageCount: 15,
		createdAt: '2024-01-14 10:20',
		updatedAt: '2024-01-14 11:30',
		tags: ['文学', '诗歌', '创作'],
	},
	{
		id: 3,
		title: '日常生活咨询与时间管理技巧分享',
		roleName: '智能助手',
		roleId: 1,
		lastMessage:
			'好的，我会帮你制定一个合理的学习计划。建议采用番茄工作法，将学习时间分为25分钟的专注时段，中间穿插5分钟的休息。这样可以提高注意力集中度，同时避免疲劳。另外，记得要根据自己的生物钟安排最重要的学习任务。',
		messageCount: 42,
		createdAt: '2024-01-13 09:15',
		updatedAt: '2024-01-15 08:20',
		tags: ['生活', '学习', '规划', '时间管理', '效率'],
	},
	{
		id: 4,
		title: '英语口语练习',
		roleName: '语言学习伙伴',
		roleId: 5,
		lastMessage: 'Your pronunciation has improved a lot! Keep practicing.',
		messageCount: 67,
		createdAt: '2024-01-12 15:45',
		updatedAt: '2024-01-15 19:30',
		tags: ['英语', '口语', '练习'],
	},
	{
		id: 5,
		title: '游戏攻略分享',
		roleName: '游戏伙伴',
		roleId: 6,
		lastMessage: '这个BOSS确实很难，你可以试试这个战术...',
		messageCount: 33,
		createdAt: '2024-01-11 20:10',
		updatedAt: '2024-01-12 21:40',
		tags: ['游戏', '攻略', 'RPG'],
	},
	{
		id: 6,
		title: '情感倾诉',
		roleName: '心理咨询师',
		roleId: 4,
		lastMessage: '记住，每个人都会遇到挫折，重要的是如何面对。',
		messageCount: 19,
		createdAt: '2024-01-10 16:25',
		updatedAt: '2024-01-11 17:15',
		tags: ['心理', '情感', '咨询'],
	},
	{
		id: 7,
		title: '深度学习项目讨论',
		roleName: '技术专家',
		roleId: 3,
		lastMessage:
			'这个神经网络模型的架构设计很有趣，建议在卷积层之间添加批归一化层来提高训练稳定性。另外，可以考虑使用残差连接来缓解梯度消失问题。数据增强方面，除了常规的旋转和缩放，还可以尝试使用Mixup或CutMix技术。',
		messageCount: 156,
		createdAt: '2024-01-09 10:30',
		updatedAt: '2024-01-15 14:20',
		tags: ['深度学习', 'AI', '神经网络', '机器学习', 'Python'],
	},
	{
		id: 8,
		title: '简短问答',
		roleName: '智能助手',
		roleId: 1,
		lastMessage: '没问题！',
		messageCount: 3,
		createdAt: '2024-01-12 08:45',
		updatedAt: '2024-01-12 08:47',
		tags: ['快速回复'],
	},
	{
		id: 9,
		title: '创业计划书撰写指导与商业模式分析',
		roleName: '商业顾问',
		roleId: 5,
		lastMessage:
			'你的商业模式很有前景，建议在市场分析部分加入更详细的竞争对手分析。财务预测部分可以考虑三种情况：保守、乐观和悲观估计。团队介绍要突出核心成员的相关经验和专业背景。另外，风险评估和应对策略也是投资人关注的重点，要详细说明可能面临的挑战和解决方案。',
		messageCount: 87,
		createdAt: '2024-01-08 15:20',
		updatedAt: '2024-01-14 18:30',
		tags: ['创业', '商业计划', '投资', '市场分析', '财务规划'],
	},
]

// 筛选后的对话列表
const filteredConversations = computed(() => {
	let result = conversations.value

	// 文本搜索
	if (searchText.value?.trim()) {
		const search = searchText.value.toLowerCase()
		result = result.filter(
			conv =>
				conv.title.toLowerCase().includes(search) ||
				conv.roleName.toLowerCase().includes(search) ||
				conv.lastMessage.toLowerCase().includes(search) ||
				conv.tags.some(tag => tag.toLowerCase().includes(search))
		)
	}

	return result.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
})

// 处理对话点击
const handleConversationClick = conversation => {
	console.log('打开对话:', conversation.title)
	// 这里可以跳转到聊天页面
	// router.push(`/chat/${conversation.id}`)
}

// 处理对话删除
const handleDeleteConversation = conversationId => {
	console.log('删除对话:', conversationId)
	conversations.value = conversations.value.filter(conv => conv.id !== conversationId)
}

// 处理对话分享
const handleShareConversation = conversation => {
	console.log('分享对话:', conversation.title)
	// 这里可以实现分享功能
}

// 清空搜索
const clearSearch = () => {
	searchText.value = ''
}

// 格式化时间显示
const formatTime = timeStr => {
	const date = new Date(timeStr)
	const now = new Date()
	const diff = now - date
	const days = Math.floor(diff / (1000 * 60 * 60 * 24))

	if (days === 0) {
		return '今天'
	} else if (days === 1) {
		return '昨天'
	} else if (days < 7) {
		return `${days}天前`
	} else {
		return date.toLocaleDateString()
	}
}

// 组件挂载后加载数据
onMounted(() => {
	// 检测屏幕尺寸并添加监听器
	checkScreenSize()
	window.addEventListener('resize', checkScreenSize)

	setTimeout(() => {
		conversations.value = mockConversations
		loading.value = false
	}, 800)
})
</script>

<template>
	<div class="page-container">
		<!-- 搜索框 -->
		<div class="search-section">
			<div class="search-box">
				<Input
					v-model:value="searchText"
					placeholder="搜索对话标题、角色或消息内容..."
					size="large"
					allow-clear
					class="search-input"
				>
					<template #prefix>
						<SearchOutlined />
					</template>
				</Input>
			</div>
		</div>

		<!-- 对话列表 -->
		<div class="conversations-section">
			<!-- 加载状态 -->
			<div
				v-if="loading"
				class="loading-placeholder"
			>
				<div class="loading-text">加载中...</div>
				<div class="skeleton-conversations">
					<div
						v-for="i in 6"
						:key="i"
						class="skeleton-conversation"
					></div>
				</div>
			</div>

			<!-- PC端对话网格 -->
			<div
				v-else-if="filteredConversations.length > 0 && !isMobile"
				class="conversations-grid"
			>
				<div
					v-for="conversation in filteredConversations"
					:key="conversation.id"
					class="conversation-card card-base hoverable"
					@click="handleConversationClick(conversation)"
				>
					<div class="conversation-header">
						<div class="conversation-avatar">
							<img
								:src="`https://lh.ithxs.com/apis.php?act=def&seed=${conversation.roleId}`"
								:alt="conversation.roleName"
							/>
						</div>
						<div class="conversation-basic">
							<h3 class="conversation-title">{{ conversation.title }}</h3>
							<div class="conversation-stats">
								<div class="role-info">
									<UserOutlined />
									<span>{{ conversation.roleName }}</span>
								</div>
								<div class="messages-info">
									<MessageOutlined />
									<span>{{ conversation.messageCount }}</span>
								</div>
							</div>
						</div>
						<div class="conversation-actions">
							<Dropdown>
								<Button
									type="text"
									class="action-btn"
								>
									<EllipsisOutlined />
								</Button>
								<template #overlay>
									<div class="action-menu">
										<div
											class="action-item"
											@click.stop="handleShareConversation(conversation)"
										>
											<ShareAltOutlined />
											分享
										</div>
										<div
											class="action-item danger"
											@click.stop="handleDeleteConversation(conversation.id)"
										>
											<DeleteOutlined />
											删除
										</div>
									</div>
								</template>
							</Dropdown>
						</div>
					</div>

					<p class="conversation-preview">{{ conversation.lastMessage }}</p>

					<div class="conversation-tags">
						<Tag
							v-for="tag in conversation.tags.slice(0, 3)"
							:key="tag"
							class="conversation-tag"
						>
							{{ tag }}
						</Tag>
						<span
							v-if="conversation.tags.length > 3"
							class="more-tags"
						>
							+{{ conversation.tags.length - 3 }}
						</span>
					</div>

					<div class="conversation-meta">
						<ClockCircleOutlined />
						<span>{{ formatTime(conversation.updatedAt) }}</span>
					</div>
				</div>
			</div>

			<!-- 移动端对话列表 -->
			<div
				v-else-if="filteredConversations.length > 0 && isMobile"
				class="conversations-list-mobile"
			>
				<div
					v-for="conversation in filteredConversations"
					:key="conversation.id"
					class="conversation-item-mobile"
					@click="handleConversationClick(conversation)"
				>
					<div class="conversation-content-mobile">
						<div class="conversation-left">
							<div class="conversation-avatar-mobile">
								<img
									:src="`https://lh.ithxs.com/apis.php?act=def&seed=${conversation.roleId}`"
									:alt="conversation.roleName"
								/>
							</div>
						</div>

						<div class="conversation-middle">
							<div class="conversation-title-mobile">{{ conversation.title }}</div>
							<div class="conversation-preview-mobile">{{ conversation.lastMessage.substring(0, 50) }}...</div>
							<div class="conversation-tags-mobile">
								<span
									v-for="tag in conversation.tags.slice(0, 2)"
									:key="tag"
									class="conversation-tag-mobile"
								>
									{{ tag }}
								</span>
							</div>
						</div>

						<div class="conversation-right">
							<div class="conversation-stats-mobile">
								<div class="messages-mobile">
									<MessageOutlined />
									<span>{{ conversation.messageCount }}</span>
								</div>
								<div class="time-mobile">
									{{ formatTime(conversation.updatedAt) }}
								</div>
								<div class="role-mobile">
									{{ conversation.roleName }}
								</div>
							</div>
							<Dropdown>
								<div class="more-btn-mobile">
									<EllipsisOutlined />
								</div>
								<template #overlay>
									<div class="action-menu">
										<div
											class="action-item"
											@click.stop="handleShareConversation(conversation)"
										>
											<ShareAltOutlined />
											分享
										</div>
										<div
											class="action-item danger"
											@click.stop="handleDeleteConversation(conversation.id)"
										>
											<DeleteOutlined />
											删除
										</div>
									</div>
								</template>
							</Dropdown>
						</div>
					</div>
				</div>
			</div>

			<!-- 空状态 -->
			<Empty
				v-else-if="!loading && filteredConversations.length === 0"
				class="empty-state"
				:description="searchText ? '没有找到匹配的对话记录' : '暂无对话历史'"
			>
				<template #image>
					<div class="empty-icon">💬</div>
				</template>
				<template #description>
					<p class="empty-desc">
						{{ searchText ? '尝试调整搜索条件' : '开始你的第一次对话，创造美好的交流体验' }}
					</p>
				</template>
				<Button
					v-if="!searchText"
					type="primary"
					size="large"
				>
					开始新对话
				</Button>
			</Empty>
		</div>
	</div>
</template>

<script>
// 为标签生成颜色的辅助函数
export default {
	methods: {
		getTagColor(tag) {
			const colors = ['blue', 'green', 'orange', 'red', 'purple', 'cyan', 'magenta']
			const hash = tag.split('').reduce((a, b) => {
				a = (a << 5) - a + b.charCodeAt(0)
				return a & a
			}, 0)
			return colors[Math.abs(hash) % colors.length]
		},
	},
}
</script>

<style lang="scss" scoped>
@use '../styles/variables.scss' as v;

/* 搜索区域 */
.search-section {
	margin-bottom: 24px;
}

.search-box {
	max-width: 600px;
	margin: 0 auto;
}

.search-input {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:hover {
		border-color: rgba(102, 126, 234, 0.4);
		background: rgba(255, 255, 255, 0.95);
	}

	&:focus,
	&.ant-input-focused {
		border-color: #667eea;
		box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 20px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 0.98);
	}

	:deep(.ant-input) {
		background: transparent;
		border: none;
		font-size: 16px;
		padding: 0px 16px;

		&::placeholder {
			color: #999;
			font-size: 15px;
		}
	}

	:deep(.ant-input-prefix) {
		color: #999;
		margin-right: 8px;

		.anticon {
			font-size: 16px;
		}
	}

	:deep(.ant-input-suffix) {
		.ant-input-clear-icon {
			color: #999;
			font-size: 14px;
			transition: color 0.2s ease;

			&:hover {
				color: #667eea;
			}
		}
	}
}

/* 对话列表容器 */
.conversations-section {
	min-height: 400px;
}

/* PC端网格布局 */
.conversations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	padding: 4px;
}

.conversation-card {
	padding: 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	min-height: 200px; // 进一步减小最小高度
	max-height: 380px; // 调整最大高度
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	height: fit-content; // 高度自适应内容

	// 添加渐变叠加层
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(102, 126, 234, 0.02) 50%, rgba(118, 75, 162, 0.02) 100%);
		pointer-events: none;
		z-index: 1;
	}

	// 确保内容在叠加层之上
	> * {
		position: relative;
		z-index: 2;
	}

	&:hover {
		transform: translateY(-4px) scale(1.01);
		box-shadow: 0 12px 48px rgba(102, 126, 234, 0.12), 0 4px 16px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
		background: rgba(255, 255, 255, 0.98);
		border-color: rgba(102, 126, 234, 0.3);

		&::before {
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(102, 126, 234, 0.05) 50%, rgba(118, 75, 162, 0.05) 100%);
		}
	}

	&:active {
		transform: translateY(-2px) scale(1.005);
		transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	// 响应式卡片内边距调整
	@media (min-width: 768px) and (max-width: 1199px) {
		padding: 18px;
		min-height: 180px;
		max-height: 340px;
		border-radius: 14px;
	}

	@media (max-width: 767px) {
		padding: 16px;
		min-height: 160px;
		max-height: 300px;
		border-radius: 12px;
	}
}

.conversation-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
	flex-shrink: 0; // 防止头部被压缩
}

.conversation-avatar {
	flex-shrink: 0;

	img {
		width: 52px;
		height: 52px;
		border-radius: 16px;
		object-fit: cover;
		border: 2px solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.conversation-card:hover & img {
		transform: scale(1.05);
		box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2), 0 4px 16px rgba(102, 126, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
		border-color: rgba(102, 126, 234, 0.3);
	}
}

.conversation-basic {
	flex: 1;
	min-width: 0;
}

.conversation-title {
	font-size: 17px;
	font-weight: 700;
	color: #1f2937;
	margin: 0 0 10px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
	transition: color 0.3s ease;

	.conversation-card:hover & {
		color: #667eea;
	}
}

.conversation-stats {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #6b7280;
	font-weight: 500;

	.role-info,
	.messages-info {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 4px 8px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 8px;
		backdrop-filter: blur(4px);
		transition: all 0.3s ease;

		.anticon {
			font-size: 13px;
			color: #667eea;
		}
	}

	.conversation-card:hover & {
		.role-info,
		.messages-info {
			background: rgba(102, 126, 234, 0.1);
			color: #4b5563;
		}
	}
}

.conversation-actions {
	flex-shrink: 0;

	.action-btn {
		color: #999;
		border: none;
		padding: 4px 8px;
		border-radius: 6px;
		transition: all 0.2s ease;

		&:hover {
			color: #667eea;
			background: rgba(102, 126, 234, 0.1);
		}
	}
}

.conversation-preview {
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	margin: 0 0 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 4; // 增加到最多4行
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	// 设置最大高度约4行文字
	max-height: calc(1.5em * 4 + 0.2em);
	flex: 1; // 让预览文字占用可用空间
}

.conversation-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 12px;
	flex-shrink: 0; // 防止标签区域被压缩
	// 限制标签区域最大高度
	max-height: 60px;
	overflow: hidden;
}

.conversation-tag {
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 12px;
	margin: 0;
	background: rgba(102, 126, 234, 0.1);
	color: #667eea;
	border: none;
}

.more-tags {
	font-size: 11px;
	color: #999;
	margin-left: 4px;
}

.conversation-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #999;
	margin-top: auto;
	flex-shrink: 0; // 防止底部信息被压缩
	padding-top: 8px;

	.anticon {
		font-size: 11px;
	}
}

/* 移动端列表布局 */
.conversations-list-mobile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px;
}

.conversation-item-mobile {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(229, 231, 235, 0.6);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	overflow: hidden;
	position: relative;

	// 渐变叠加层
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%);
		pointer-events: none;
		z-index: 1;
	}

	// 确保内容在叠加层之上
	> * {
		position: relative;
		z-index: 2;
	}

	// PC端样式
	@media (min-width: v.$breakpoint-tablet) {
		border-radius: 16px;
		box-shadow: 0 6px 24px rgba(102, 126, 234, 0.1), 0 3px 12px rgba(0, 0, 0, 0.05);
	}

	// 中屏样式
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		border-radius: 15px;
	}

	// 小屏样式
	@media (max-width: 480px) {
		border-radius: 12px;
		box-shadow: 0 3px 12px rgba(102, 126, 234, 0.06), 0 1px 6px rgba(0, 0, 0, 0.04);
	}

	// Hover效果（仅非触摸设备）
	@media (hover: hover) {
		&:hover {
			transform: translateY(-2px) scale(1.01);
			background: rgba(255, 255, 255, 0.98);
			border-color: rgba(102, 126, 234, 0.2);
			box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);

			&::before {
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(102, 126, 234, 0.04) 100%);
			}
		}
	}

	// Active效果
	&:active {
		transform: scale(0.98);
		transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
	}
}

// 移动端对话内容容器 - 支持响应式布局
.conversation-content-mobile {
	display: flex;
	padding: 12px;
	gap: 10px;
	align-items: flex-start;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
	border-radius: 12px;
	transition: all 0.3s ease;

	// PC端 - 更宽松的布局
	@media (min-width: v.$breakpoint-tablet) {
		padding: 16px 20px;
		gap: 16px;
		border-radius: 16px;
	}

	// 中屏 - 平板设备
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		padding: 14px 16px;
		gap: 12px;
		border-radius: 14px;
	}

	// 小屏 - 移动设备
	@media (max-width: v.$breakpoint-mobile) {
		padding: 10px 12px;
		gap: 8px;
		border-radius: 12px;
	}

	// 超小屏 - 紧凑布局
	@media (max-width: 480px) {
		padding: 8px 10px;
		gap: 8px;
	}
}

.conversation-left {
	flex-shrink: 0;
}

.conversation-avatar-mobile {
	img {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		object-fit: cover;
		border: 2px solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	// PC端头像尺寸
	@media (min-width: v.$breakpoint-tablet) {
		img {
			width: 56px;
			height: 56px;
			border-radius: 14px;
		}
	}

	// 中屏头像尺寸
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		img {
			width: 52px;
			height: 52px;
			border-radius: 13px;
		}
	}

	// 小屏头像尺寸
	@media (max-width: v.$breakpoint-mobile) {
		img {
			width: 44px;
			height: 44px;
			border-radius: 11px;
		}
	}

	// 超小屏头像尺寸
	@media (max-width: 480px) {
		img {
			width: 40px;
			height: 40px;
			border-radius: 10px;
		}
	}
}

.conversation-middle {
	flex: 1;
	min-width: 0;
	padding-right: 8px;

	// PC端和中屏增加右边距
	@media (min-width: v.$breakpoint-mobile) {
		padding-right: 12px;
	}
}

.conversation-title-mobile {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
	transition: color 0.3s ease;

	// PC端标题尺寸
	@media (min-width: v.$breakpoint-tablet) {
		font-size: 16px;
		margin-bottom: 8px;
	}

	// 中屏标题尺寸
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		font-size: 15px;
		margin-bottom: 7px;
	}

	// Hover效果（仅非触摸设备）
	@media (hover: hover) {
		.conversation-item-mobile:hover & {
			color: #667eea;
		}
	}
}

.conversation-preview-mobile {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	// PC端预览文字尺寸
	@media (min-width: v.$breakpoint-tablet) {
		font-size: 13px;
		margin-bottom: 8px;
		line-height: 1.6;
	}

	// 中屏预览文字尺寸
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		font-size: 12.5px;
		margin-bottom: 7px;
	}

	// 小屏紧凑布局
	@media (max-width: 480px) {
		font-size: 11px;
		margin-bottom: 5px;
	}
}

.conversation-tags-mobile {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	overflow: hidden;
	max-height: 24px;

	// PC端标签布局
	@media (min-width: v.$breakpoint-tablet) {
		gap: 8px;
		max-height: 28px;
	}

	// 中屏标签布局
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		gap: 6px;
		max-height: 26px;
	}

	// 小屏标签布局
	@media (max-width: 480px) {
		gap: 4px;
		max-height: 20px;
	}
}

.conversation-tag-mobile {
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
	color: #667eea;
	font-weight: 500;
	flex-shrink: 0;
	border: 1px solid rgba(102, 126, 234, 0.15);
	transition: all 0.3s ease;

	// PC端标签尺寸
	@media (min-width: v.$breakpoint-tablet) {
		font-size: 11px;
		padding: 4px 10px;
		border-radius: 12px;
	}

	// 中屏标签尺寸
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		font-size: 10.5px;
		padding: 3px 9px;
		border-radius: 11px;
	}

	// 小屏标签尺寸
	@media (max-width: 480px) {
		font-size: 9px;
		padding: 2px 6px;
		border-radius: 8px;
	}

	// Hover效果（仅非触摸设备）
	@media (hover: hover) {
		&:hover {
			background: linear-gradient(135deg, rgba(102, 126, 234, 0.18) 0%, rgba(118, 75, 162, 0.12) 100%);
			border-color: rgba(102, 126, 234, 0.25);
			transform: translateY(-1px);
		}
	}
}

.conversation-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.conversation-stats-mobile {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 11px;
	color: #9ca3af;
	font-weight: 500;

	// PC端统计信息尺寸
	@media (min-width: v.$breakpoint-tablet) {
		gap: 8px;
		font-size: 12px;
	}

	// 中屏统计信息尺寸
	@media (min-width: v.$breakpoint-mobile) and (max-width: v.$breakpoint-tablet) {
		gap: 7px;
		font-size: 11.5px;
	}

	// 小屏统计信息尺寸
	@media (max-width: 480px) {
		gap: 4px;
		font-size: 10px;
	}
}

.messages-mobile {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 6px;
	background: rgba(102, 126, 234, 0.08);
	border-radius: 8px;
	color: #667eea;
	transition: all 0.3s ease;

	.anticon {
		font-size: 11px;
	}

	// PC端消息数尺寸
	@media (min-width: v.$breakpoint-tablet) {
		gap: 6px;
		padding: 4px 8px;
		border-radius: 10px;

		.anticon {
			font-size: 12px;
		}
	}

	// 小屏消息数尺寸
	@media (max-width: 480px) {
		gap: 4px;
		padding: 2px 5px;
		border-radius: 6px;

		.anticon {
			font-size: 10px;
		}
	}
}

.time-mobile {
	font-size: 10px;
	color: #cbd5e1;
	font-weight: 400;

	// PC端时间尺寸
	@media (min-width: v.$breakpoint-tablet) {
		font-size: 11px;
	}

	// 小屏时间尺寸
	@media (max-width: 480px) {
		font-size: 9px;
	}
}

.role-mobile {
	font-size: 10px;
	color: #667eea;
	font-weight: 600;
	padding: 2px 6px;
	background: rgba(102, 126, 234, 0.05);
	border-radius: 6px;
	border: 1px solid rgba(102, 126, 234, 0.1);

	// PC端角色标签尺寸
	@media (min-width: v.$breakpoint-tablet) {
		font-size: 11px;
		padding: 3px 8px;
		border-radius: 8px;
	}

	// 小屏角色标签尺寸
	@media (max-width: 480px) {
		font-size: 9px;
		padding: 2px 5px;
		border-radius: 5px;
	}
}

.more-btn-mobile {
	padding: 6px 10px;
	border-radius: 8px;
	color: #9ca3af;
	cursor: pointer;
	background: rgba(248, 250, 252, 0.8);
	transition: all 0.3s ease;
	border: 1px solid rgba(229, 231, 235, 0.8);

	// PC端更多按钮尺寸
	@media (min-width: v.$breakpoint-tablet) {
		padding: 8px 12px;
		border-radius: 10px;
	}

	// 小屏更多按钮尺寸
	@media (max-width: 480px) {
		padding: 4px 8px;
		border-radius: 6px;
	}

	// Hover效果（仅非触摸设备）
	@media (hover: hover) {
		&:hover {
			color: #667eea;
			background: rgba(102, 126, 234, 0.12);
			border-color: rgba(102, 126, 234, 0.2);
			transform: translateY(-1px);
		}
	}

	&:active {
		transform: scale(0.95);
	}
}

/* 下拉菜单样式 */
.action-menu {
	padding: 8px 0;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.action-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 13px;

	&:hover {
		background: #f5f5f5;
	}

	&.danger {
		color: #ff4d4f;

		&:hover {
			background: rgba(255, 77, 79, 0.1);
		}
	}

	.anticon {
		font-size: 12px;
	}
}

/* 加载状态样式 */
.skeleton-conversation {
	height: 200px; // 与实际卡片最小高度保持一致
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;

	// 响应式高度调整
	@media (min-width: 768px) and (max-width: 1199px) {
		height: 180px;
		border-radius: 14px;
	}

	@media (max-width: 767px) {
		height: 160px;
		border-radius: 12px;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
		animation: skeleton-loading 1.8s infinite;
	}
}

@keyframes skeleton-loading {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* 响应式设计优化 */
// 移除原有的响应式规则，因为已经在.conversations-grid中定义了更完整的响应式布局

.skeleton-conversations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	padding: 4px;

	// 中屏 - 2-3列布局
	@media (min-width: 768px) and (max-width: 1199px) {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 14px;
	}

	// 小屏 - 单列布局
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.conversation-content-mobile {
		padding: 12px;
		gap: 10px;
	}

	.conversation-avatar-mobile img {
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}

	.conversation-title-mobile {
		font-size: 14px;
	}

	.conversation-preview-mobile {
		font-size: 11px;
	}

	.conversation-tag-mobile {
		font-size: 9px;
		padding: 1px 4px;
	}
}
</style>
